<template>
      <div class="main">
          <div class="search">
              <el-form  label-width="80px" size="mini" :model="formLabelAlign">
                <el-form-item label="发件人" v-if="infoData.type == 'mongo'">
                    <el-input style="width:300px" v-model="formLabelAlign.name"></el-input>
                </el-form-item>
                  <el-form-item label="收件人" v-else>
                      <el-input style="width:300px" v-model="formLabelAlign.name"></el-input>
                  </el-form-item>
                  <el-form-item label="类别">
                    <el-select v-model="formLabelAlign.typeValue" placeholder="请选择类别">
                        <el-option v-for="(v,item) in formLabelAlign.type" :key="item" :label="v.name" :value="v.type"></el-option>
                    </el-select> 
                </el-form-item>
                <el-form-item label="状态">
                    <el-select v-model="formLabelAlign.stateValue" placeholder="请选择状态">
                        <el-option v-for="(v,item) in formLabelAlign.state" :key="item" :label="v.name" :value="v.state"></el-option>

                    </el-select>
                </el-form-item>
            </el-form>
            <div class="submit">
                <el-button type="primary" @click="submitForm()">搜索</el-button>
                <el-button @click="resetForm()">重置</el-button>
            </div>
          </div>
          <div class="busdsa">
              <el-button @click="this.newMeg">发送新消息</el-button>
          </div>
          <div style="height:100%">
              <el-scrollbar  >
                <div style="height:100%;margin:0 20px">
                    <el-table
                        :data="tableData"
                        v-loading="tableLoadding"
                        border
                        @selection-change="handleSelectionChange"
                        style="width: 100%;height:100%">
                        <el-table-column
                        type="selection"
                        width="40">
                        </el-table-column>
                        <el-table-column
                        prop="type"
                        label="消息类别"
                        width="80">
                        </el-table-column>
                        <el-table-column
                        prop="content"
                        label="内容">
                            <template slot-scope="scope">
                                <div v-if="scope.row.content.length < 300" v-html="scope.row.content"></div>
                                <div v-else v-html="scope.row.content" style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
                                    
                                </div>
                                <!-- <div v-html="scope.row.content"></div> -->
                            </template>
                        </el-table-column>
                        <el-table-column
                        prop="add_time"
                        width="180"
                        label="时间">
                        </el-table-column>
                        <el-table-column
                        prop="true_name"
                        width="80"
                        v-if="infoData.type == 'mongo'"
                        label="发件人">
                        </el-table-column>
                        <el-table-column
                                prop="true_name"
                                width="80"
                                v-else
                                label="收件人">
                        </el-table-column>
                        <el-table-column
                        prop="state"
                        width="80"
                        label="状态">
                        </el-table-column>
                        <el-table-column
                        label="操作"
                        width="100">
                        <template slot-scope="scope">
                            <el-button @click="handleClick(scope.row,'view')" type="text" size="small">查看</el-button>
<!--                            <el-button @click="handleClick(scope.row.id,'del')" type="text" size="small">删除</el-button>-->
                        </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-scrollbar>
          </div>
          
        
        <div class="otherFunc">
            <div>
                <el-button type="primary" @click="oppall('view')" v-if="infoData.type == 'mongo'">
                    标记为已读
                </el-button>
<!--                <el-button type="danger"  @click="oppall('del')">-->
<!--                    删除-->
<!--                </el-button>-->
            </div>
            <el-pagination
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage1"
                :page-size="10"
                layout="total, prev, pager, next"
                :total="totalRow">
    </el-pagination>
  </div>
    </div>
</template>

<script>
import $ from "jquery";
export default {
    props:{
        infoData:Object
    },
    data(){
        return {
            tableData: [],
            tableLoadding: true,
            currentPage1: 1,
            totalRow:0,
            isRefresh:0,
            handleSelection:[],
            type:"normal",
            formLabelAlign:{
                name:"",
                type:[],
                typeValue:"",
                state:[],
                stateValue:"",
            },
        }
    },
    watch:{
        $route(to,from){
            // console.log(to,from);
            // if(this.$route.query.type != null){
            //     console.log(2)
            //     // this.loading(this.$route.query.type)
            //     this.load(this.$route.query.type)
            // }
        },

    },
    mounted(){
        // console.log(this.$router)
        // this.loading()
        // $(()=>{
        //     console.log(32)
        // })
        if(this.isRefresh == 0){
            setTimeout(()=>{
                console.log(2345678)
                this.load((this.$route.query.type || "READ"))

                $.get(this.infoData.getType,{},Response => {
                    if(Response.success){
                        // console.log(Response.data)
                        let typeData = Response.data
                        typeData.type.forEach(k=>{
                            // console.log(k)
                            switch(k.type){
                                case "BPM-MESSAGE":
                                    k.name = "流程消息"
                                    break;
                                case "SYSTEM":
                                    k.name = "系统通知"
                                    break;
                                case "WORKFLOW":
                                    k.name = "工作流"
                                    break;
                                case "MESSAGE":
                                    k.name = "短消息"
                                    break;
                            }
                        })
                        typeData.state.forEach(k=>{
                            // console.log(k)
                            switch(k.state){
                                case "READ":
                                    k.name = "已读"
                                    break;
                                case "UNREAD":
                                    k.name = "未读"
                                    break;
                            }
                        })
                        this.formLabelAlign.type = typeData.type
                        // this.formLabelAlign.typeValue = typeData.type[0].type
                        // this.formLabelAlign.stateValue = typeData.state[0].state
                        this.formLabelAlign.state = typeData.state
                        // console.log(this.formLabelAlign)
                    }else{
                        this.$message.error(Response.errMessage);
                    }
                })
            },1000)

        }

        // setInterval(()=>{
        //     console.log(this.infoData)
        //     // this.load()
        // },1000)

        
    },
    activated(){
        console.log(this.isRefresh)
        if(this.isRefresh == 1){
            console.log(23)
            this.load()
        }

    },
    methods: {
        newMeg(){
            this.isRefresh = 1
            this.$router.push({path:'/message/'+ this.infoData.type + '/send'})
        },
      handleCurrentChange(val) {
          console.log(this.currentPage1)
        // console.log(`当前页: ${val}`);
          this.tableLoadding =  true
        if(this.type == "normal"){
            // this.loading()
            this.load(this.$route.query.type)
        }else{
            this.search(this.currentPage1);
        }
        
      },
      submitForm(){
        //   console.log(this.formLabelAlign)
        this.type =  this.formLabelAlign.stateValue
        // this.loading()
          this.tableLoadding =  true;
        this.currentPage1 = 1
        this.search(1);
      },
      oppall(type){
          if(this.handleSelection.length == 0){
              this.$message.error("请勾选信息");
              return ;
          }
          let id =  JSON.stringify(this.handleSelection)
          // console.log(id)
          if(type == "view"){
            /*  标记为已读 */
            // this.loading(true)
              this.tableLoadding =  true
            $.get(this.infoData.alread,{"id":id},Response => {
                if(this.type == "normal"){
                    // this.loading()
                    this.tableLoadding =  false
                    this.load(this.$route.query.type)
                }else{
                    this.search(this.currentPage1);
                }
            })
            
        }else if(type == "del"){

            this.$confirm('此操作将永久删除, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                // this.loading(true)
                this.tableLoadding =  true
                $.get(this.infoData.del,{"id":id},Response => {
                    if(this.type == "normal"){
                        // this.loading()
                        this.tableLoadding =  false
                        this.load(this.$route.query.type)
                    }else{
                        this.search(this.currentPage1);
                    }
                    // this.loading(false)
                    if(Response.success){
                        this.$message({
                            type: 'success',
                            message: '已删除'
                        });  
                    }
                })
                // this.loading(false)
                
            }).catch(() => {
                // this.$message({
                //     type: 'info',
                //     message: '已取消删除'
                // });          
            });
            
        }

      },
      search(page = 1){
            $.get(this.infoData.search,{"name":this.formLabelAlign.name,"typeValue":this.formLabelAlign.typeValue,"stateValue":this.formLabelAlign.stateValue,"page":page},Response => {
                if(Response.success){
                    this.tableData = Response.data.data;
                    this.totalRow = Response.data.totalRow;
                    // this.loading(false)
                }else{
                    this.$message.error(Response.errMessage);
                }
                this.tableLoadding = false
            })
      },
      resetForm(){
          this.formLabelAlign.typeValue = ''
          this.formLabelAlign.stateValue = ''
          this.formLabelAlign.name = ''
      },
      handleSelectionChange(val) {
        
        this.handleSelection = []
        val.forEach(k=>{
            this.handleSelection.push(k.id)
        })
        // console.log(this.handleSelection)
      },
      load(type = "UNREAD"){
        //   "/api/v20/message/already"

          $.get(this.infoData.alreadyList,{"page":this.currentPage1,"type":type},Response => {
              // console.log(Response)
              if(Response.success){

                this.tableData = Response.data.data;

                this.totalRow = Response.data.totalRow;

            }else{
                this.$message.error(Response.errMessage);
            }
            // this.loading(false)
              this.tableLoadding =  false
        })
      },
      handleClick(item,type){
        // console.log(item,type)
        if(type == "view"){
            // console.log(item.type)
            if(item.type == "流程消息"){
                // console.log(item.bind_data)
                this.openPubPage("deal", item.bind_data.id);
            }else {
                this.$router.push({path:"/message/"+ this.infoData.type+"/view",query:{"id":item.id}})
            }
            /*  标记为已读 */
            // this.loading(true)
            this.tableLoadding =  true
            $.get(this.infoData.alread,{id:JSON.stringify([item.id])},Response => {
                if(this.type == "normal"){
                    // this.loading()
                    this.load(this.$route.query.type)
                }else{
                    this.search(this.currentPage1);
                }
                this.tableLoadding =  false
            })
            
        }else if(type == "del"){

            this.$confirm('此操作将永久删除, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                // this.loading(true)
                this.tableLoadding =  true
                
                $.get(this.infoData.del,{id:JSON.stringify([item])},Response => {
                    if(this.type == "normal"){
                        // this.loading()
                        this.load(this.$route.query.type)
                    }else{
                        this.search(this.currentPage1);
                    }
                    this.tableLoadding =  false
                    // this.loading(false)
                    if(Response.success){
                        this.$message({
                            type: 'success',
                            message: '已删除'
                        });  
                    }
                })
                // this.loading(false)
                
            }).catch(() => {
                // this.$message({
                //     type: 'info',
                //     message: '已取消删除'
                // });          
            });
            
        }
      },
      openPubPage(type, id) {
            window.open("../../bpm/ins/ins.pub.html?type="+type+"&id=" + id, "dealtask", "left=100, top=100, width=800, height=600");
       },
      loading(bool = true) {
                
            const loading = this.$loading({
            lock: true,
            text: '',
            spinner: 'el-icon-loading',
            background: 'rgba(255, 255, 255, 0.7)'
            });
            if(!bool){
                loading.close();
            }
        }
    },
}
</script>

<style scoped lang="less">
    .main{
        height:100vh;
        // overflow-y: auto;
        width:100%;    
        flex-direction: column;
        // justify-content: space-between;
        .el-scrollbar{
            height: 100%;
           .el-scrollbar__wrap{
               overflow-x: hidden;
            } 
        }
        .search{
            height:80px;
            margin-top:20px;
            form{
                display: flex;
            }
            .submit{
                margin: auto;
                width: 122px;
            }
        }
        .busdsa{
            margin:20px 10px;
        }
        .otherFunc{
            padding:10px;
            display: flex;
            align-items: center;
        }
    }
</style>